<template>
  <div class="three-js">
  </div>
</template>

<script>
import * as THREE from 'three'

export default {
  name: 'ThreeJS',
  data () {
    return {
      scene: new THREE.Scene(),
      // 透视摄像机                        视野角度     长宽比                            近截面 远截面
      camera: new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000),
      renderer: new THREE.WebGLRenderer(),
      geometry: new THREE.BoxGeometry(),
      material: new THREE.MeshBasicMaterial({ color: 0x00ff00 }),
      cube: null
    }
  },
  components: {
  },
  created () {
  },
  mounted () {
    this.renderer.setSize(window.innerWidth / 2, window.innerHeight / 2)
    const threeJs = document.getElementsByClassName('three-js')[0]
    threeJs.appendChild(this.renderer.domElement)
    this.cube = new THREE.Mesh(this.geometry, this.material)
    this.scene.add(this.cube)
    this.camera.position.z = 5
    this.animate()
  },
  methods: {
    animate () {
      requestAnimationFrame(this.animate)
      this.cube.rotation.x += 0.01
      this.cube.rotation.y += 0.01
      this.renderer.render(this.scene, this.camera)
    }
  }
}
</script>

<style>

</style>
